<template>
  <div class="home">
    <div class="home-top flex justify-between">
      <!--  管理员信息 -->
      <div class="user-info-main" v-if="userStatisticInfo">
        <div class="flex align-center">
          <img :src="handleImgUrl(userStatisticInfo.headImg)" alt="头像">
          <div>
            <h3>{{ userStatisticInfo.realName }}</h3>
            <p>{{ userStatisticInfo.userName }}</p>
          </div>
        </div>
        <ul class="margin-t-20">
          <li>
            <span>{{ userStatisticInfo.taskTotal || 0 }}</span>
            <p>我的任务</p>
          </li>
          <li>
            <span>{{ userStatisticInfo.reportTotal }}</span>
            <p>已出报告</p>
          </li>
          <li class="warning">
            <span>{{ userStatisticInfo.warningTotal }}</span>
            <p>预警指标</p>
          </li>
        </ul>
      </div>
      <div :style="{width:userStatisticInfo?'70%':'100%'}" class="flex justify-between">
        <div class="chart-box dosm-task">
          <div class="title">
            <h4>待办事项</h4>
            <span>{{ waitDealArr.length || ''}}</span>
          </div>
          <div class="main">
            <el-table :show-header="false" :data="waitDealArr" @row-click="jumpWait">
              <el-table-column prop="title" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="content" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="createTime" show-overflow-tooltip>
              </el-table-column>
              <el-table-column width="65" prop="state">
                <template slot-scope="scope">
                  <span v-if="scope.row.state">已处理</span>
                  <el-button v-else v-has="99" type="text" @click.native.stop="handle('check',scope.row)">{{getWaitDealOP(scope.row)}}</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="flex-right margin-t-10" v-if="waitDealArr.length">
              <el-pagination small @current-change="changeWaitDealPage" :current-page.sync="waitDealSearch.pageIndex" :page-size="waitDealSearch.pageSize" layout="prev, pager, next" :total="waitDealTotal">
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="chart-box dosm-task">
          <div class="title">
            <h4>站内通知</h4>
            <span>{{ stationMessageArr.length || ''}}</span>
          </div>
          <div class="main">
            <el-table :show-header="false" :data="stationMessageArr" @row-click="jumpWait">
              <el-table-column prop="title" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="content" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="updateTime" show-overflow-tooltip>
              </el-table-column>
              <el-table-column width="65" prop="state">
                <template slot-scope="scope">
                  <el-button v-has="99" type="text" @click.native.stop="handle('read',scope.row)">未读</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="flex-right margin-t-10" v-if="stationMessageArr.length">
              <el-pagination small @current-change="changeStationMessagePage" :current-page.sync="stationMessageSearch.pageIndex" :page-size="stationMessageSearch.pageSize" layout="prev, pager, next" :total="stationMessageTotal">
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="chart-box system-info">
          <div class="title">
            <h4>质控点预警提示</h4>
            <span>{{ warningArr.length || '' }}</span>
          </div>
          <div class="main">
            <el-table :show-header="false" :data="warningArr">
              <el-table-column prop="warningTitile" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="warningContent" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="createTime" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="warningState">
                <template slot-scope="scope">
                  <span v-if="scope.row.warningState == 1">预警中</span>
                  <span v-has="100" v-if="scope.row.warningState == 2" @click.native.stop="handle('warning',scope.row)">关闭</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="flex-right margin-t-10" v-if="warningArr.length">
              <el-pagination small @current-change="changeWarningPage" :current-page.sync="warningSearch.pageIndex" :page-size="warningSearch.pageSize" layout="prev, pager, next" :total="warningSearchTotal">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="home-bottom">
      <div class="left-tab">
        <!-- <el-tabs type="border-card" v-model="activeAspect" tabPosition="left" @tab-click="handleClick($event, 'aspect')" style="height: 100%;">
          <el-tab-pane v-for="aspect in aspects" :label="aspect.indexName" :name="aspect.indexX" :key="aspect.indexX">
            <div class="top-tab">
              <el-tabs v-model="activeAngle" @tab-click="handleClick($event, 'angle')" style="height: 100%;">
                <el-tab-pane v-for="angle in angles" :label="angle.rangeName" :name="angle.rangeId+''" :key="angle.rangeId+''">
                  <div v-if="aspect.indexX=='0' && angle.rangeId==0">
                    <div class="chart-box target-statistic">
                      <div class="title">
                        <h4>目标标准统计</h4>
                      </div>
                      <targetBar :targetData="targetData"></targetBar>
                    </div>
                    <div class="flex point-list">
                      <div class="chart-box dosm-finish">
                        <div class="title">
                          <h4>目标标准完成情况</h4>
                          <el-select v-model="targetStandardId" @change="handleCommand">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                          </el-select>
                        </div>
                        <div class="echart-box">
                          <pointFinish :pointData="pointData"></pointFinish>
                          <indexTable :target-standard-id="targetStandardId"></indexTable>
                        </div>
                      </div>
                    </div>
                  </div>
                  <iframe v-else v-for="iframe in iframes" :key="iframe.id" :src="iframe.chartUrl" frameborder="0" style="width:100%;height:100%;" id="iframeBox"></iframe>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-tab-pane>
        </el-tabs> -->

        <el-card>
          <div class="chart-box target-statistic">
            <div class="title">
              <h4>目标标准统计</h4>
              <el-select v-model="selectYear" @change="getTargetList">
                <el-option v-for="(year,index) in yearArr" :key="index" :label="year" :value="year">
                </el-option>
              </el-select>
            </div>
            <targetBar height="432px" :targetData="targetData"></targetBar>
          </div>
          <div class="flex point-list">
            <div class="chart-box dosm-finish">
              <div class="title">
                <h4>目标标准完成情况</h4>
                <el-select v-model="targetStandardId" @change="handleCommand">
                  <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div class="echart-box">
                <pointFinish :pointData="pointData"></pointFinish>
                <indexTable :target-standard-id="targetStandardId"></indexTable>
              </div>
            </div>
          </div>
        </el-card>
      </div>

    </div>

    <!-- 审核 -->
    <checkDialog v-if="dialogParams.visible" :dialog-params="dialogParams" @check="check"></checkDialog>
    <!-- 关闭预警 -->
    <closeWarning :dialog-params="warningParams" @getList="getWarningList"></closeWarning>
  </div>
</template>

<script>
import targetBar from '@/components/echarts/target-bar'
import pointFinish from '@/components/echarts/index-point-finish'
import indexTable from '@/components/cardToList/indexTable'
import setStandardValue from '@/views/targetSystem/standardManage/module/setStandardValue'
import checkDialog from '@/views/targetSystem/targetCheck/module/check'
import closeWarning from '@/views/domsImprove/monitor/module/closeWarning'
import { getWaitDealList, getStationMessageList, updateStationMessageState, getWarningList, getTargetList, getPointFinishList, getUserStatisticInfo, getTargetStandardById, updateWaitDealState, getUserTabs } from '../api'
import { getMyTargetById, queryMyTarget, queryMyTargetStandardAll } from '../api/target'
import { checkReport } from '../api/report'
export default {
  name: 'index',
  components: {
    targetBar,
    pointFinish,
    setStandardValue,
    indexTable,
    checkDialog,
    closeWarning
  },
  data () {
    return {
      warning: [
        {
          content: '引进的高层次人才数',
          createTime: '2020-01-12 12:30',
          state: 1
        },
        {
          content: '专任教师占部门总人数的占比',
          createTime: '2020-01-12 12:30'
        },
        {
          content: '高层次人才占部门总人数占比',
          date: '2020-01-12 12:30'
        },
        {
          content: '兼职教师占部门总人数占比',
          date: '2020-01-12 12:30'
        },
        {
          content: '年龄结构分析',
          date: '2020-01-12 12:30'
        },
        {
          content: '青年教师占部门总人数占比（35岁）',
          date: '2020-01-12 12:30'
        }
      ],
      waitDealArr: [],
      waitDealTotal: 0,
      waitDealSearch: {
        pageIndex: 1,
        pageSize: 5
      },
      stationMessageArr: [],
      stationMessageTotal: 0,
      stationMessageSearch: {
        pageIndex: 1,
        pageSize: 5
      },
      warningArr: [],
      warningSearchTotal: 0,
      warningSearch: {
        pageIndex: 1,
        pageSize: 5
      },
      options: [],
      // 诊改任务与完成情况下拉值
      targetStandardId: '',
      targetData: [],
      // 用户相关统计信息
      userStatisticInfo: null,
      // 质控点完成情况
      pointData: {},
      // 审核相关参数
      dialogParams: {
        visible: false,
        title: '审核',
        type: 'check',
        id: ''
      },
      // 关闭预警
      warningParams: {
        visible: false,
        id: ''
      },
      pointForm: {},
      standardParams: {
        visible: false,
        title: '设置标准值',
        type: 'standard',
        data: {}
      },
      aspects: [],
      angles: [],
      activeAspect: '',
      activeAngle: '',
      iframes: [],
      userInfo: {},
      yearArr: this.$config.yearArr(),
      selectYear: new Date().getFullYear()
    }
  },
  created () {
    this.queryMyTargetStandardAll()
    this.getWaitDeal()
    this.getStationMessage()
    this.getWarningList()
    this.getUserStatisticInfo()
    this.getUserTabInfo()
    // 获取目标标准统计
    this.getTargetList()
  },
  methods: {
    handleImgUrl (url) {
      if (url) {
        if (url.indexOf('http') > -1) {
          return url
        } else {
          return this.baseURL + url
        }
      } else {
        return require('@/assets/images/default.png')
      }
    },
    getWaitDealOP (row) {
      if (row.type === 5 || (row.type === 3 && row.content.indexOf('质控点标准值') > -1)) {
        return '设置'
      } else if (row.type === 4) {
        return '发布'
      } else {
        return '审核'
      }
    },
    // 下拉切换数据
    handleCommand (command) {
      this.targetStandardId = command
      this.getPointFinishChart()
    },
    // 获取待办事项列表
    getWaitDeal () {
      getWaitDealList(this.waitDealSearch)
        .then(res => {
          this.waitDealArr = res.dataList || []
          this.waitDealTotal = res.total || 0
        })
        .catch(() => {})
    },
    // 获取站内通知列表
    getStationMessage () {
      getStationMessageList(this.stationMessageSearch)
        .then(res => {
          this.stationMessageArr = res.dataList || []
          this.stationMessageTotal = res.total || 0
        })
        .catch(() => {})
    },
    // 获取质控点预警提醒
    getWarningList () {
      getWarningList(this.warningSearch)
        .then(res => {
          this.warningArr = res.dataList || []
          this.warningSearchTotal = res.total || 0
        })
        .catch(() => {})
    },
    // 目标标准统计
    getTargetList () {
      getTargetList({ year: this.selectYear })
        .then(res => {
          console.log(res)
          this.targetData = res || []
        })
        .catch(() => {})
    },
    // 获取目标标准完成情况
    getPointFinishChart () {
      getPointFinishList({ targetStandardId: this.targetStandardId })
        .then(res => {
          this.pointData = res || {}
        })
        .catch(() => {})
    },
    // 查询用户相关统计信息
    getUserStatisticInfo () {
      getUserStatisticInfo()
        .then(res => {
          this.userStatisticInfo = res || {}
          // this.options = res.targetStandardUserDTOList || []
          // // 默认显示第一个选项
          // if (this.options.length) {
          //   this.targetStandardId = this.options[0].id
          //   // 目标标准完成情况targetStandardId为必传参数
          //   this.getPointFinishChart()
          // }
        })
        .catch(() => {})
    },
    // 审核
    handle (type, data) {
      switch (type) {
        case 'check':
          if (data.type == 3) {
            if (data.content.indexOf('质控点标准值') > -1) {
              getTargetStandardById(data.relationId).then(row => {
                this.$router.push({
                  path: `/target/standardManage/levelList/${row.indexX}`,
                  query: {
                    index: 2,
                    id: row.id,
                    rectificationRangeId: row.rectificationRangeId,
                    isWaitDeal: true,
                    waitDealId: data.id
                  }
                })
              })
            } else {
              getTargetStandardById(data.relationId).then(row => {
                this.$router.push({
                  path: `/target/check/levelList/${row.indexX}`,
                  query: {
                    index: 1,
                    id: row.id,
                    adminId: data.receiveUser,
                    isWaitDeal: true,
                    waitDealId: data.id
                  }
                })
              })
            }
          } else if (data.type == 4) {
            getTargetStandardById(data.relationId).then(row => {
              this.$router.push({
                path: `/target/check/levelList/${row.indexX}`,
                query: {
                  index: 1,
                  id: row.id,
                  dutyUser: data.receiveUser,
                  isWaitDeal: true,
                  waitDealId: data.id
                }
              })
            })
          } else if (data.type == 5) {
            getMyTargetById(data.relationId).then(row => {
              this.$router.push({
                path: `/target/myTarget/levelList/${row.indexX}`,
                query: {
                  index: 2,
                  id: row.id,
                  isWaitDeal: true,
                  waitDealId: data.id
                }
              })
            })
          } else {
            // 审核报告
            this.dialogParams = {
              visible: true,
              title: '审核',
              okText: '审核',
              type: 'checkReport',
              id: data.id,
              relationId: data.relationId,
              isWaitDeal: true
            }
          }
          break
        case 'warning':
          this.warningParams = {
            visible: true,
            id: data.id
          }
          break
        case 'read':
          updateStationMessageState(data.id, 1)
            .then(res => {
              this.$message.success('操作成功')
              this.getStationMessage()
            })
            .catch(() => {})
      }
    },
    // 待办事项切换页码
    changeWaitDealPage (val) {
      this.waitDealSearch.pageIndex = val
      this.getWaitDeal()
    },
    // 站内通知切换页码
    changeStationMessagePage (val) {
      this.stationMessageSearch.pageIndex = val
      this.getStationMessage()
    },
    // 质控点预警提示切换页码
    changeWarningPage (val) {
      this.warningSearch.pageIndex = val
      this.getWarningList()
    },
    // 审核
    check (examineOpinion, state) {
      const params = {
        examineOpinion: examineOpinion,
        examineState: +state,
        id: this.dialogParams.relationId
      }
      checkReport(params)
        .then(res => {
          this.$message.success('操作成功')
          this.dialogParams.visible = false
          if (this.dialogParams.isWaitDeal) {
            updateWaitDealState(this.dialogParams.id, 1)
          }
          this.getWaitDeal()
        })
        .catch(() => {})
    },
    // 待办事项跳转
    jumpWait (row) {
      console.log(row, 'row');
      if (row.type == 1) {
        // 存储当前选中的菜单
        this.$store.dispatch('SET_ACTIVE_INDEX', 19)
        this.$router.push({
          path: `/target/check/levelList/${row.indexX}`,
          query: {
            index: 1,
            id: row.relationId
          }
        })
      } else if (row.type == 2) {
        // 存储当前选中的菜单
        this.$store.dispatch('SET_ACTIVE_INDEX', 72)
        this.$router.push({
          path: `/report/reportCheck/cardDetail/${row.indexX}`,
          query: {
            id: row.relationId
          }
        })
      }
    },
    getUserTabInfo () {
      /*      getUserTabs()
        .then(res => {
          this.aspects = res || []
          this.aspects.push({
            indexX: '0',
            indexName: '个人',
            rectificationRangeIndexMenuDTOList: [
              {
                rangeId: 0,
                rangeName: '个人',
                discernCode: '100000'
              }
            ]
          })

          this.activeAspect = this.aspects[0].indexX
          this.angles = this.aspects[0].rectificationRangeIndexMenuDTOList
          this.activeAngle = this.angles[0].rangeId + ''

          // this.activeAspect = this.aspects[2].indexX
          // this.angles = this.aspects[2].rectificationRangeIndexMenuDTOList
          // this.activeAngle = this.angles[0].rangeId + ''
          this.getChartsInfo()
        })
        .catch(e => console.error(e)) */

      this.aspects.push({
        indexX: '0',
        indexName: '个人',
        rectificationRangeIndexMenuDTOList: [
          {
            rangeId: 0,
            rangeName: '个人',
            discernCode: '100000'
          }
        ]
      })

      this.activeAspect = this.aspects[0].indexX
      this.angles = this.aspects[0].rectificationRangeIndexMenuDTOList
      this.activeAngle = this.angles[0].rangeId + ''
      this.getChartsInfo()
    },
    handleClick (event, name) {
      if (name === 'aspect') {
        this.activeAspect = event.$el.id.substr(event.$el.id.indexOf('-') + 1)
        const temp = this.aspects.filter(x => x.indexX === this.activeAspect)
        this.angles = temp[0].rectificationRangeIndexMenuDTOList
        this.activeAngle = this.angles[0].rangeId + ''
      } else {
        this.activeAngle = event.$el.id.substr(event.$el.id.indexOf('-') + 1)
      }
      this.getChartsInfo()
    },
    getChartsInfo () {
      if (this.activeAspect == '0' && this.activeAngle == 0) {
        this.getTargetList()
      } else {
        this.iframes = []
        const activeProp = this.$config[`${this.activeAspect}&&${this.activeAngle}`]
        if (activeProp) {
          if (activeProp.hasCode) {
            const angle = this.angles.find(a => a.rangeId + '' === this.activeAngle)
            const codeArr = angle.discernCode.split(',')
            for (let i = 0; i < codeArr.length; i++) {
              this.iframes.push({
                id: activeProp.id + i,
                chartUrl: `${this.analysisURL}/analysis/dashboard/show/${activeProp.id}/?code=${codeArr[i]}`
              })
            }
          } else {
            this.iframes.push({
              id: activeProp.id + 1,
              chartUrl: `${this.analysisURL}/analysis/dashboard/show/${activeProp.id}/`
            })
          }
        }
      }
    },
    // 获取我负责和我管理的目标标准
    queryMyTargetStandardAll () {
      queryMyTargetStandardAll().then(res => {
        this.options = res
        // 默认显示第一个选项
        if (this.options.length) {
          this.targetStandardId = this.options[0].id
          // 目标标准完成情况targetStandardId为必传参数
          this.getPointFinishChart()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  /deep/ .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0;
  }
  /deep/ .el-table td {
    padding: 2px;
  }
  /deep/ .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: transparent;
  }
  .target-statistic {
    margin-right: 10px;
    float: left;
  }

  .home-top {
    width: 100%;
    height: 35%;
    box-sizing: border-box;

    .chart-box {
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      height: 100%;
      width: calc((100% - 30px) / 3);
      margin-left: 10px;
      box-sizing: border-box;

      .title {
        @include flex();
        margin-top: -1px;
        margin-left: -1px;
        padding: 8px 20px;
        background-color: $blue;
        color: $white;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
      .main {
        padding: 8px 15px;
        font-size: 12px;
        li {
          @include flex();
          line-height: 28px;
          cursor: pointer;
        }
        .content {
          width: 120px;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .date {
          margin-right: 13px;
        }
        .state {
          width: 40px;
          text-align: center;
          &.check {
            color: $blue;
          }
        }
      }
      .el-dropdown {
        color: $white;
      }
    }

    .user-info-main {
      font-size: 14px;
      align-items: center;
      width: 30%;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 4px;

      & > div {
        justify-content: space-around;
        margin-top: 5%;
        height: 45%;
      }

      ul {
        @include flex();
        margin-top: 5%;
        text-align: center;
        justify-content: space-around;
        .warning {
          color: $red;
        }
      }
      img {
        width: 100px;
        height: 100px;
        line-height: 100px;
        object-fit: contain;
        border: 1px dashed #ccc;
        border-radius: 4px;
        text-align: center;
      }
    }
  }

  .home-bottom {
    width: 100%;
    height: calc(100% - 10px - 35%);
    margin-top: 10px;

    & > div {
      display: inline-block;
    }

    .left-tab {
      width: 100%;
      height: 100%;

      /deep/ .el-tabs--left .el-tabs__item.is-left {
        text-align: right;
        height: 80px;
        line-height: 80px;
      }
      /deep/ .el-tabs__content,
      .el-tab-pane {
        height: 92%;
      }
      /deep/ .el-tab-pane {
        height: 100%;
      }
    }
    .top-tab {
      height: 100%;
      width: 100%;

      /deep/ .el-tab-pane {
        overflow-y: scroll;
      }
    }
  }
  .target-statistic {
    /deep/ .el-select .el-input__inner {
      background-color: transparent;
      color: #fff;
      border: 0;
      height: 16px;
      line-height: 16px;
    }
    /deep/ .el-select .el-input .el-select__caret,
    /deep/ .el-input input::placeholder {
      color: #fff;
    }
    /deep/ .el-input input {
      text-align: right;
    }
    /deep/ .el-input--small .el-input__icon {
      line-height: 16px;
    }
  }
  .dosm-finish {
    width: 100%;
    height: 100%;
    .echart-box {
      display: flex;
      justify-content: space-between;
    }
    /deep/ .el-select .el-input__inner {
      background: transparent;
      color: #fff;
      border: 0;
      height: 16px;
      line-height: 16px;
    }
    /deep/ .el-select .el-input .el-select__caret,
    /deep/ .el-input input::placeholder {
      color: #fff;
    }
    /deep/ .el-input input {
      text-align: right;
    }
    /deep/ .el-input--small .el-input__icon {
      line-height: 16px;
    }
  }
  .chart-box {
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    height: 100%;
    box-sizing: border-box;
    .title {
      @include flex();
      margin-top: -1px;
      margin-left: -1px;
      padding: 8px 20px;
      background-color: $blue;
      color: $white;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    .main {
      padding: 8px 15px;
      font-size: 12px;
      li {
        @include flex();
        line-height: 28px;
        cursor: pointer;
      }
      .content {
        width: 120px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .date {
        margin-right: 13px;
      }
      .state {
        width: 40px;
        text-align: center;
        &.check {
          color: $blue;
        }
      }
    }
    .el-dropdown {
      color: $white;
    }
  }
}
</style>
